<template>
  <div>
    <!-- 选择部门 -->
    <el-row
      v-show="visible"
      style="width: 50%; border: 1px solid black"
      class="tree-box"
    >
      <span id="del" @click="close"><i class="el-icon-circle-close"></i></span>
      <el-tree
        v-show="visible"
        :data="treeData"
        :props="{ label: 'name' }"
        @node-click="selectNode"
      />
    </el-row>
  </div>
</template>

<script >
// 导入部门数据api 组织架构
import { getDepartments } from '@/api/departments'
// 导入树形组织架构方法
import { formatTreeData } from '@/utils/index'
export default {
  name: 'Tree',
  props: {
    // 控制弹层
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showTree: true, // 部门树形结构
      treeData: [] // 定义数组接受树形数据
    }
  },
  // 页面创建钩子函数
  created () {
    this.GgetDepartments()
  },
  methods: {
    // 获取后台部门数据
    async GgetDepartments () {
      // 发送请求获取后台 部门数据
      const { depts } = await getDepartments()
      // 处理树形结构 并赋值
      this.treeData = formatTreeData(depts)
    },
    // 点击部门树形结构时
    selectNode (val) {
      // 给部门赋值  点击当前部门选择的数据 子=>父
      this.$emit('current-select', val)
      // 关闭树形结构
      this.close()
    },
    // 关闭树形结构
    close () {
      // 子传父通知其关闭
      // this.$emit('clode-tree', false)
      this.$emit('update:visible', false)
    }
  }

}
</script>

<style lang="scss" scoped>
.tree-box {
  position: relative;
}
#del {
  text-align: center;
  line-height: 20px;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
</style>
